<template>
    <div>
        <div class="caculatorInput">
            <p>
                <span>投资金额</span>
                <input type="text" v-model="money" @click="errMsg = ''">
                <span class="inputColor">元</span>
            </p>
            <p>
                <span>投资时间</span>
                <input type="text" v-model="date" @click="errMsg = ''">
                <span class="inputColor">{{dateType}}</span>
            </p>
            <p>
                <span>预计年化收益</span>
                <input type="text" v-model="yield" @click="errMsg = ''">
                <span class="inputColor">%</span>
            </p>
            <p>
                <span>还款方式</span>
                <select v-model="selected" @click="selectedTpye">
                    <option disabled value="">请选择还款方式</option>
                    <option>按周等本等息</option>
                    <option>一次性还本付息</option>
                </select>
            </p>
            <p class="inputBtn">
                <span @click="count">计算</span>
                <span @click="reset">重置</span>
            </p>
        </div>
        <div class="caculatorOut">
            <span class="errMsg">{{errMsg}}</span>
            <p>
                <span class="inputColor">本息合计（元）</span>
                <span>{{sum}}</span>
            </p>
            <p>
                <span class="inputColor">利息收入（元）</span>
                <span>{{interest}}</span>
            </p>
        </div>
        <div class="caculatorList">
            <p>
                <span>期数</span>
                <span>应收本金</span>
                <span>应收利息</span>
                <span>本息合计</span>
            </p>
            <p v-for="item of dataList" :key="item.time">
                <span>{{item.time}}</span>
                <span>{{item.principal}}</span>
                <span>{{item.interest}}</span>
                <span>{{item.sum}}</span>
            </p>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            money: "", //投资金额
            date: "", //投资时间
            dateType: "天", //投资时间单位
            yield: "", //预计年化收益
            selected: "", //还款方式
            sum: "00.00",
            interest: "00.00",
            dataList: [],
            errMsg: ""
        }
    },
    mounted() {

    },
    methods: {
        selectedTpye() {
            this.errMsg = '';
            if (this.selected == "按周等本等息") {
                this.dateType = '周'
            }
            if (this.selected == "一次性还本付息") {
                this.dateType = '天'
            }
        },
        count() {
            // console.log(this.money,this.date,this.yield,this.money);
            if (!this.money) {
                this.errMsg = "投资金额不能为空";
                return
            }
            if (!this.date) {
                this.errMsg = "投资时间不能为空";
                return
            }
            if (!this.yield) {
                this.errMsg = "预计年化收益不能为空";
                return
            }
            if (!this.selected || this.selected == "请选择还款方式") {
                this.errMsg = "还款方式不能为空";
                return
            }
            let interestYears;//年单位
            if (this.dateType == "天") {
                interestYears = this.date / 365
            } else if (this.dateType == "周") {
                interestYears = this.date * 7 / 365
            } else if (this.dateType == "月") {
                interestYears = this.date / 12
            }
            this.interest = new Number((this.money * this.yield * interestYears / 100).toFixed(2));
            this.sum = new Number(this.money) + new Number(this.interest);
            if (this.dateType == "天") {
                this.dataList = [
                    {
                        "time": "第" + this.date + this.dateType,
                        "principal": this.money,
                        "interest": this.interest,
                        "sum": this.sum
                    }
                ]
            }
            if (this.dateType == "周") {
                for (let i = 0; i < this.date; i++) {
                    this.dataList[i] = {
                        "time": "第" + (i + 1) + this.dateType,
                        "principal": (this.money / this.date).toFixed(2),
                        "interest": (this.interest / this.date).toFixed(2),
                        "sum": (this.sum / this.date).toFixed(2)
                    }
                }
            }
        },
        reset() {
            this.money = "",
            this.date = "",
            this.yield = "",
            this.selected = "",
            this.errMsg = "",
            this.sum = "00.00",
            this.interest = "00.00"
        }
    }
}
</script>
<style>
.caculatorInput {
    width: 100%;
    background: white;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.caculatorInput>p {
    width: calc(100%-.3rem);
    margin-left: .3rem;
    border-bottom: 1px solid #eee;
    font-size: .4rem;
    padding: .2rem 0;
    padding-right: .2rem;
}

.caculatorInput input {
    border: none;
    width: 5rem;
    padding-left: 1rem
}

select {
    width: 5rem;
    border: none;
    font-size: .4rem
}

option {
    padding-left: 0;
    font-size: .15rem;
    height: 1rem;
    padding: 0
}

.caculatorInput>p>span:first-child {
    display: inline-block;
    width: 2.4rem
}

.caculatorInput>p>span:last-child {
    float: right
}

.inputColor {
    color: #999
}

.inputBtn {
    display: flex;
    justify-content: space-around
}

.errMsg {
    display: block;
    width: 100%;
    text-align: center;
    padding: .2rem
}

.caculatorInput p.inputBtn>span {
    display: inline-block;
    width: 40%;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    color: white;
    background: #dd524d;
    border-radius: 3px
}

.caculatorOut {
    font-size: .4rem;
    color: #dd524d
}

.caculatorOut>p {
    padding: .2rem .4rem
}

.caculatorList {
    width: 94%;
    background: white;
    padding: .3rem;
    margin: 0 auto;
    padding-bottom: 0
}

.caculatorList p {
    padding-bottom: .3rem
}

.caculatorList span {
    display: inline-block;
    width: 24%;
    text-align: center
}
</style>

